<template>
	<view class="page-display">
		<image class="element bg" mode="scaleToFill" :src="backgrounImage"></image>
		<view class="header-zone">
			<view class="header-title">
				{{ facility.name }}
			</view>
			<view class="facility-status element">运行中</view>
		</view>
		<!-- <view class="element">
			<view>长沙市</view>
		</view> -->
		<image class="element ad-zone" mode="heightFix" :src="adImage"></image>
		<image class="element layout-zone" mode="heightFix" :src="layoutImage"></image>
		<view class="today-customer element">
			{{todayCustomer}}
		</view>
		<view class="element toilet-count">
			{{totalToilet}}
		</view>
		<view class="element toilet-use-count">
			{{toiletUseCount}}
		</view>
		<view class="element toilet-left-count">
			{{toiletLeftCount}}
		</view>
		<view class="element hum">
			{{hm}}%
		</view>
		<view class="element temperature">
			{{temperature}}℃
		</view>
		<view class="element pm25">
			{{pm25}}
		</view>
		<view class="element nh3">
			{{nh3}}
		</view>
		<view class="element h2s">
			{{h2s}}
		</view>
		<view class="element version">
			编号：{{screen.id}} - 版本号：{{version}}
		</view>
		<!-- <view style="position: fixed;top: 100px;left:20px,z-index:1000;width: 200px;color: red">
			 {{size}}
		</view> -->
	</view>
</template>

<script>
	import OfflineData from '/common/offline-data-cache.js'
	import {getImageCache } from '/common/image-cache.js'
	import {
		version
	} from '@/common/config.js'
	
	export default {
		props: {
			responseData: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				version: version,
				adImage: '',
				layoutImage: '',
				backgrounImage: '',
				size: ''
			}
		},
		computed: {
			facility() {
				return OfflineData.facility();
			},
			screen () {
				return OfflineData.screen(); 
			},
			// version () {
			
			// 	// #ifdef APP
			// 	return plus.runtime.versionCode
			// 	// #endif
			// 	// #ifdef H5
			// 	return 0
			// 	// #endif
			// },
			paramMap () {
				const json = OfflineData.getSetting('paramMap');
				try {
					return JSON.parse(json);
				}catch(e){
					console.error(e)
					return {}
				}
			},
			fixedParam () {
				const json = OfflineData.getSetting('fixedParam');
				try {
					return JSON.parse(json);
				}catch(e){
					console.error(e)
					return {}
				}
			},
			todayCustomer() {
				return 0;
			},
			totalToilet() {
				return this.fixedParam['totalToilet'] || 0
			},
			toiletUseCount() {
				return 0
			},
			toiletLeftCount() {
				return this.totalToilet - this.toiletUseCount;
			},
			temperature() {
				const t = this.responseData[this.paramMap['temperature']]
				if(t) {
					// 格式化
					return t/10;
				}
				return 0;
			},
			hm() {
				const t = this.responseData[this.paramMap['hm']]
				if(t) {
					// 格式化
					return t/10;
				}
				return 0;
			},
			pm25() {
				const t = this.responseData[this.paramMap['pm25']]
				if(t) {
					// 格式化
					return t;
				}
				return 0;
			},
			nh3() {
				const t = this.responseData[this.paramMap['nh3']]
				if(t) {
					// 格式化
					return t;
				}
				return 0;
			},
			h2s() {
				const t = this.responseData[this.paramMap['h2s']]
				if(t) {
					// 格式化
					return t;
				}
				return 0;
			},
			screen() {
				return OfflineData.screen()
			},
			
			
		},
		watch: {
			responseData() {
				console.log('数据变化')
			}
		},
		mounted() {
			this.getAdImage()
			this.getLayoutImage()
			this.getBgImage()
			this.size = JSON.stringify(uni.getWindowInfo(), '', 2);
		},
		methods: {
			async getAdImage() {
				const path = OfflineData.getScreenSetting('adImage')
				const localPath = await getImageCache(path);
				this.adImage = localPath
			},
			async getLayoutImage() {
				const path = OfflineData.getScreenSetting('layoutImage')
				const localPath = await getImageCache(path);
				this.layoutImage = localPath
			},
			async getBgImage() {
				const path = OfflineData.getScreenSetting('background')
				const localPath = await getImageCache(path);
				this.backgrounImage = localPath
			}
		}
	}
</script>

<style scoped>
	.page-display {
		width: 100vw;
		height: 100vh;
	}
	.bg {
		width: 100%;
		height: 100%;
	}

	.header-zone {
		position: relative;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.header-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.header-title {
		box-sizing: content-box;
		position: relative;
		left: 0;
		right: 0;
		padding: 0 40rpx;
		color: white;
		font-weight: bold;
		font-size: 40rpx;
		text-shadow: 1rpx 3rpx 5rpx black;
	}

	.header-zone {}

	.element {
		position: absolute;
	}

	.facility-status {
		position: absolute;
		right: 20rpx;
		padding: 0 30rpx;
		border: white 6rpx solid;
		border-radius: 40rpx;
		height: 40rpx;
		background-color: rgb(105,210,30);
		line-height: 40rpx;
		color: white;
	}
	
	.ad-zone {
		right: 20rpx;
		top: 160rpx;
		height: 300rpx;
	}
	.layout-zone {
		left: 150rpx;
		top: 500rpx;
		height: 400rpx;
	}
	.today-customer {
		top: 969rpx;
		left: 40rpx;
		width: 200rpx;
		color:#466F97;
		font-size: 86rpx;
		display: flex;
		justify-content: flex-end;
	}
	.toilet-count {
		top: 923rpx;
		left: 570rpx;
		color: #F3E72D;
		font-size: 48rpx;
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
	}
	.toilet-use-count {
		top: 1000rpx;
		left: 395rpx;
		color: white;
		font-size: 48rpx;
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
	}
	.toilet-left-count {
		top: 1000rpx;
		left: 570rpx;
		color:white;
		font-size: 48rpx;
		width: 100rpx;
		display: flex;
		justify-content: flex-end;
	}
	.version {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		color: white;
		font-size: 14rpx;
	}
	.temperature {
		top: 1173rpx;
		left: 160rpx;
		width: 100rpx;
		font-size: 34rpx;
		color: #466F97;
		font-weight: bold;
		text-align: center;
		display: flex;
		justify-content: center;
	}
	.hum {
		top: 1173rpx;
		left: 50rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		font-size: 34rpx;
		color: #466F97;
		font-weight: bold;
		text-align: center;
	}

	.pm25 {
		top: 1173rpx;
		left: 274rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		font-size: 34rpx;
		color: #466F97;
		font-weight: bold;
		text-align: center;
	}
	.nh3 {
		top: 1112rpx;
		left: 565rpx;
		width: 150rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 38rpx;
		color: #335B7F;
		font-weight: bold;
		text-align: center;
	}
	.h2s {
		top: 1197rpx;
		left: 565rpx;
		width: 150rpx;
		display: flex;
		justify-content: flex-end;
		font-size: 38rpx;
		color: #335B7F;
		font-weight: bold;
		text-align: center;
	}
</style>